import { PROJECT_PREFIX } from '../../types/constants'
import { PANEL_TYPE_CONFIG } from './types'

export function styles(): string {
  return `
    .custom-panel {
      all: initial !important;
      display: flex !important;
      align-items: center !important;
      gap: 10px !important;
      width: 100% !important;
      margin-bottom: 15px !important;
      
      ${Object.entries(PANEL_TYPE_CONFIG).map(([type, config]) => `
        .panel-container.${type} .panel-header {
          border-left: .2em solid ${config.borderColor};
          background-color: ${config.backgroundColor};
        }
      `).join('')}
      
      .panel-container {
        position: relative;
        border-radius: 8px;
        flex: 1 !important;
        overflow: hidden;
        box-shadow: 0 1px 3px rgba(0,0,0,0.1);
        transition: all 0.3s ease;
        border: 1px solid var(--${PROJECT_PREFIX}-theme-border-primary) !important;

        .panel-header {
          display: flex;
          align-items: center;
          padding: .4em .6em .4em 0.5em;
          font-weight: 600;
          cursor: pointer;
          user-select: none;
          position: relative;
          z-index: 1;
          
          .header-content {
            all: initial !important;
            display: flex;
            align-items: center;
            gap: 5px;
            width: 100%;
            .panel-icon {
              font-size: 1.2em;
            }
            .panel-title {
              font-weight: 400;
              color: #222832;
              line-height: 1.65;
              font-size: 1em;
            }
            .panel-time {
              font-size: 0.9em;
              color: #777;
              margin-left: auto;
              font-weight: 400;
            }
          }
        }

        .toggle-button {
          min-width: 32px;      /* 设置最小宽度 */
          width: auto;          /* 取消宽度限制 */
          margin-left: auto;    /* 保持靠右 */
          background: none;
          border: none;
          cursor: pointer;
          padding: 0.5em;
          border-radius: 4px;
          transition: transform 0.2s;
          color: #666;
          &:hover {
            color: #111;
          }
          :active {
            transform: scale(0.95);
          }
          .toggle-icon {
            width: 1.25em;
            height: 1.25em;
            stroke: currentColor;
            stroke-width: 2;
            stroke-linecap: round;
            stroke-linejoin: round;
            fill: none;
            font-size: .8em;
          }
        }

        .panel-content {
          display: none;
          background: var(--${PROJECT_PREFIX}-theme-bg-base) !important;
          padding: 1em;
          margin: 0 1em;
          border-top: 1px solid rgba(0,0,0,0.1);
        }
        
        .panel-content.is-open {
          display: block;
        }
      }
    }

    /* 响应式调整 */
    @media (max-width: 768px) {
      .panel-container {
        margin: 0.75em 0;
      }
      
      .panel-header {
        padding: 0.5em;
      }
      
      .panel-content {
        padding: 0.75em;
      }
    }
  `
}
